<template>
    <div class="card-01">
        <div class="w show" ref="moon">
            <div class="c1-l">
                <h3>好书有伴APP</h3>
                <p> 
                    好书有伴是社交化读书平台，提供社交化读书解决方案，为女性用户实用性
学习赋能，为优质内容生产者增值。
                </p>
                <img src="../../../assets/imgs/grow-up.acd0b6e.png" alt="">
            </div>

            <div class="c1-r">
                <img src="../../../assets/imgs/jz-core.1e9f213.png" alt="">
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    const moon = ref()
    document.addEventListener('scroll', function(e) {
        const top = document.documentElement.scrollTop || 0
        if(!moon.value) return
        if(top >= 1000)  moon.value.classList.remove('show')   
        else moon.value.classList.add('show')
    })
</script>

<style lang="less" scoped>
.card-01 {
    height: 815px;
    background: url('../../../assets/imgs/s-bg.png') no-repeat 50%;
    background-size: 2560px 803px;

    > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        &.show {
            .c1-l {
                h3 {
                    animation: delayShow .5s forwards;
                }

                p {
                    opacity: 0;
                    animation: delayShow .5s forwards;
                }

                img {
                     opacity: 0;
                    animation: delayShow .5s .1s forwards;
                }
            }
            .c1-r {
                img {
                    opacity: 0;
                    animation: delayShow .5s .2s forwards;
                }
            }
        }

        .c1-l {
            flex: 0 0 532px;

            h3 {
                font-size: 47px;
                font-weight: 500;
                line-height: 55px;
                font-family: PingFang SC-Medium,PingFang SC;
                opacity: 0;
            }

            p {
                margin-top: 16px;
                font-size: 16px;
                line-height: 34px;
                font-family: PingFang SC-Regular,PingFang SC;
                color: #666;
                opacity: 0;
            }

            img {
                width: 100%;
                margin-top: 36px;
                opacity: 0;
            }
        }

        .c1-r {
            flex: 0 0 1024px;
            img {
                width: 100%;
                opacity: 0;
            }
        }
    }
}

@keyframes delayShow {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
</style>